angular.module('myApp')
  .factory('MessageBox', ['$document', '$compile', '$rootScope', '$q', function ($document, $compile, $rootScope, $q) {
    // 创建弹框容器和遮罩层
    const createContainer = () => {
      const mask = angular.element('<div class="v-modal"></div>');
      const container = angular.element('<div class="messagebox-container"></div>');
      $document.find('body').append(mask);
      $document.find('body').append(container);
      return { mask, container };
    };

    // 销毁弹框
    const destroyContainer = (mask, container) => {
      mask.remove();
      container.remove();
    };

    // 显示弹框（通用方法）
    const showMessageBox = (options) => {
      const { mask, container } = createContainer();
      const deferred = $q.defer();
      const scope = $rootScope.$new(true);

      // 绑定选项到作用域
      scope.title = options.title || '提示';
      scope.message = options.message || '';
      scope.type = options.type || 'alert'; // alert/confirm/prompt
      scope.showInput = options.type === 'prompt';
      scope.inputValue = options.inputValue || '';

      // 处理用户操作
      scope.handleConfirm = () => {
        const result = scope.showInput ? scope.inputValue : true;
        deferred.resolve(result);
        destroyContainer(mask, container);
      };

      scope.handleCancel = () => {
        deferred.reject('cancel');
        destroyContainer(mask, container);
      };

      // 动态编译模板
      const template = `
      <div class="el-message-box__wrapper">
        <div class="el-message-box">
          <div class="el-message-box__header">
            <div class="el-message-box__title">{{title}}</div><button type="button" aria-label="Close"
              class="el-message-box__headerbtn"><i class="el-message-box__close el-icon-close" ng-click="handleCancel()"></i></button>
          </div>
          <div class="el-message-box__content">
            <div class="el-message-box__container" ng-if="!showInput">
              <div class="el-message-box__message">
                <p>{{message}}</p>
              </div>
            </div>
            <div class="el-message-box__input" ng-if="showInput">
              <div class="el-input">
                <input type="text" autocomplete="off" placeholder="" class="el-input__inner" ng-model="inputValue">
              </div>
              <div class="el-message-box__errormsg" style="visibility: hidden;"></div>
            </div>
          </div>
          <div class="el-message-box__btns">
            <button ng-if="type === 'confirm' || type === 'prompt'" class="el-button el-button--default el-button--small"
              ng-click="handleCancel()">取消</button>
            <button class="el-button el-button--default el-button--small el-button--primary "
              ng-click="handleConfirm()">确定</button>
          </div>
        </div>
      </div>
    `;

      container.append($compile(template)(scope));
      return deferred.promise;
    };

    // 对外暴露的方法
    return {
      alert: (message, title) => showMessageBox({ type: 'alert', message, title }),
      confirm: (message, title) => showMessageBox({ type: 'confirm', message, title }),
      prompt: (message, title, inputValue) => showMessageBox({ type: 'prompt', message, title, inputValue })
    };
  }]);